<template>
  <div>
      <div class="footer">
      <ul>
        <li class="con"><span class="iconfont icon-shouye"></span> <p>首页</p> </li>
        <li><span class="iconfont icon-jingpinketang"></span> <p>课堂</p> </li>
        <li><span class="iconfont icon-shangcheng"></span><p>商城</p></li>
        <li><span class="iconfont icon-shoucangjia"></span><p>收藏夹</p></li>
        <li><span class="iconfont icon-wode"></span><p>我的</p></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
.footer{
    z-index: 100;
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 55px;
    background-color: #FFFFFF;
    ul{
      
      display: flex;
       align-items: center;
       justify-content: space-around;
      li{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 10px;
        color: #8A8A8A;
        line-height: 10px;
        span{
          margin:10px 0px;
          display: block;
          font-size: 16px;
          color: #969696;
        }
      }
      .con{
        color: black;
        span{
          color: black;
          font-weight: bold;
        }
      }
    }
  }

</style>